<template>
	<view class="watch">
		<view class="back">
			<image src="https://siha.vxmeng.com/static/component/fh.png" mode="widthFix"></image>
			<view class="tit">第{{current+1}}集</view>
		</view>
		
		<swiper class="swiper" circular :vertical="true" :current="current" @change="changeVideo">
			<swiper-item class="swiper-item" v-for="(item,index) in list">
				<view class="videoImg" :class="isPop || isEpisodes?'active':''" v-if="Math.abs(current - index) <= 1">
					<video poster="https://siha.vxmeng.com/static/shu.jpg" :src="item.formal_file" :controls="!isPop" :autoplay="current == index" :loop="true"
					 :id="index" @touchend.prevent="videoClick">
					</video>
				</view>
				
				<view class="list" v-if="!isPop&&!isEpisodes">
					<view class="item">
						<image v-if="item.is_like!=1" @click="doLikePleasure(item)" src="https://siha.vxmeng.com/static/privacy/1.png" mode="aspectFit"></image>
						<image v-else @click="doLikePleasure(item)" src="https://siha.vxmeng.com/static/privacy/1_1.png" mode="aspectFit"></image>
						<view>{{'30.5万'}}</view>
					</view>
					<view class="item">
						<image v-if="item.is_like!=1" @click="doLikePleasure(item)" src="https://siha.vxmeng.com/static/playlet/no-sc.png" mode="aspectFit"></image>
						<image v-else @click="doLikePleasure(item)" src="https://siha.vxmeng.com/static/playlet/sc.png" mode="aspectFit"></image>
						<view>{{item.is_like?'已收藏':'未收藏'}}</view>
					</view>
					<view class="item" @click="getComment(item)">
						<image src="https://siha.vxmeng.com/static/privacy/2.png" mode="aspectFit"></image>
						<view>评论</view>
					</view>
					<view class="item" @click="getEpisodes(item)">
						<image src="https://siha.vxmeng.com/static/playlet/xj.png" mode="aspectFit"></image>
						<view>选集</view>
					</view>
					<view class="item">
						<!-- #ifdef H5 -->
						<view class="share">
							<image @click="messageFun('share')" src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
							<text>{{$t('sjzx.fx')}}</text>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<button class="share" open-type="share">
							<image src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
							<text>{{$t('sjzx.fx')}}</text>
						</button>
						<!-- #endif -->
					</view>
				</view>
				
				<view class="info" v-if="!isPop">
					<view class="tit">{{item.name}}</view>
					<text class="intro" :class="isExpand?'on':''">第{{current+1}}集 | 林悦然在经历家族背叛和爱情失利后，意外重生回到二十岁。她带着前世的记忆，决心改变命运，不再重蹈覆辙，开始逐步揭露家族内部的阴谋。</text>
					<view class="btn" @click="onExpand">{{isExpand?'收起':'展开'}}</view>
				</view>
			</swiper-item>
		</swiper>
		
		<view :class="isPop ? 'comment active':'comment'">
			<image @click="isPop = false" src="https://siha.vxmeng.com/static/index/close.png" mode=""></image>
			<view class="commList">
				<view v-for="(commItem, commIndex) in commentList" class="comm-item">
					<view class="lef">
						<image :src="getImg(commItem.user_avatar)" mode=""></image>
					</view>
					<view class="rig">
						<view class="comm-top">
							<text class="name">{{commItem.user_nickname}}</text>
						</view>
						<view class="text">{{commItem.remark}}</view>
						<view class="bot">
							<view class="left">
								<text>{{getDiffTime(commItem.create_time)}}</text>
								<text class="reply" @click="onReply(commItem.id, commItem.user_nickname)">{{$t('smkj.hf')}}</text>
							</view>
							
							<view class="right">
								<image v-if="commItem.is_like!=1" @click="doLikeComment(commItem)"
									src="https://siha.vxmeng.com/static/privacy/1.png" mode="widthFix"></image>
								<image v-else @click="doLikeComment(commItem)" src="https://siha.vxmeng.com/static/privacy/1_1.png" mode="widthFix"></image>
								<text>{{commItem.like_num}}</text>
							</view>
						</view>
						
						<!-- 二级评论 -->
							<view class="comm-item" v-for="twoRemark in commItem.twoRemark">
								<view class="lef">
									<image :src="getImg(twoRemark.user_avatar)" mode=""></image>
								</view>
								<view class="rig">
									<view class="comm-top">
										<text class="name">{{twoRemark.user_nickname}}</text>
									</view>
									<view class="text">{{twoRemark.remark}}</view>
									<view class="bot">
										<view class="left">
											<text>{{getDiffTime(twoRemark.create_time)}}</text>
											<text class="reply" @click="onReply(commItem.id, twoRemark.user_nickname)">{{$t('smkj.hf')}}</text>
										</view>
										
										<view class="right">
											<image v-if="twoRemark.is_like!=1" @click="doLikeComment(twoRemark)"
												src="https://siha.vxmeng.com/static/privacy/1.png" mode="widthFix"></image>
											<image v-else @click="doLikeComment(twoRemark)" src="https://siha.vxmeng.com/static/privacy/1_1.png" mode="widthFix"></image>
											<text>{{twoRemark.like_num}}</text>
										</view>
									</view>
								</view>
							</view>
						<view class="more" v-if="commItem.second_replay_num && commItem.twoRemark.length<commItem.second_replay_num" @click="getMore(list[current].id, commItem)">展开 {{commItem.second_replay_num}} 条回复</view>
					</view>
				</view>
			</view>
			<view class="write">
				<input :adjust-position="false" type="text" :placeholder="$t('smkj.lxndpl')" :focus="isFocus" @focus="inputBindFocus"/>
			</view>
		</view>
		
		<view class="replyBox" v-if="isReplyPop" @click="hidePop">
			<view class="write" :style="{'bottom': bottom+'px'}" @click.stop="">
				<input @blur="inputBindBlur" :adjust-position="false" :focus="isfocus_2" @focus="inputOnFocus"
					type="text" v-model="remark" :placeholder="replyObj.placeholder" @confirm="doRemarkPleasure(list[current])"/>
				<image @click="doRemarkPleasure(list[current])" src="https://siha.vxmeng.com/static/privacy/3.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view :class="isEpisodes ? 'episodes active':'episodes'">
			<view class="top">
				<view>{{'这是一部短剧'}}-第{{current+1}}集</view>
				<text>更新至第{{'93'}}集</text>
				<image @click="isEpisodes = false" src="https://siha.vxmeng.com/static/index/close.png" mode=""></image>
			</view>
			
			<view class="titBtn">
				<!-- 总集数/30 , 81总集数-->
				<view class="btn_item" v-for="(item, index) in (81/30)" @click="toggleList(index+1)" :class="active==(index+1)?'on':''">
					<text v-if="(81/30) <= index + 1">{{index*30+1}}-{{81}}</text>
					<text v-else>{{index*30+1}}-{{(index+1)*30}}</text>
				</view>
			</view>
			
			<view class="episodesList">
				<!-- episodesList -->
				<view class="episodesItem" v-for="(item, index) in 30">
					<image src="https://siha.vxmeng.com/static/shu.jpg" mode="aspectFill"></image>
					<view class="bot">第{{index+1}}集</view>
					<!-- 未解锁 -->
					<view class="zzc" v-if="index>=15">
						<image src="https://siha.vxmeng.com/static/playlet/wjs.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
		<comReward v-if="isObtain"></comReward>
		<comPay v-if="isPay" @hidePay="hidePay"></comPay>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
		<comLack v-if="isLack" @hide="hideLack" value="10000"></comLack>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				isExpand: false,
				isPop: false,
				isPay: false,
				isLack: false,
				isObtain: false,
				isEpisodes: false,
				page: 1,
				total: 0,
				current: 0,
				refs: null,
				list: [],
				episodesList: [],
				remark: "",
				current: 0,
				commentList: [],
				replyObj: {},
				isReplyPop: false,
				tabBarHeight: 0,
				bottom: 0,
				isFocus: false,
				isfocus_2: false,
				isPlay: true,
			}
		},
		onReady() {
			this.$music.bgmInstance.destroy();
			this.$music.bgmInstance = null;
			
			this.getPleasureInfoLike()
			this.refs = uni.createVideoContext(`${this.current}`);//当前页的video实例
			
			let systemInfo =uni.getSystemInfoSync();
			console.log(systemInfo);
			this.tabBarHeight= systemInfo.screenHeight - systemInfo.windowHeight;
			console.log(this.tabBarHeight);
		},
		onShow() {
			setTimeout(()=>{
				if(this.$music.bgmInstance){
					this.$music.bgmInstance.destroy();
					this.$music.bgmInstance = null;
				}
			}, 0)
			
			if(this.$tools.getStore('share_dou')){
				this.$music.play_obtain();
				this.isObtain = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.isObtain = false;
					// this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				this.$tools.setStore('share_dou', false)
			}
		},
		methods: {
			hideLack(){
				this.isLack = false
			},
			hidePay(e){
				this.isPay=false
				if(e == 1){
					this.isLack = true
				}
			},
			videoClick(){
				this.touchNum ++
				setTimeout(()=>{
					if(this.touchNum >= 2){
						this.changePlay(!this.isPlay)
					}
					this.touchNum = 0
				},250)
			},
			changePlay(e){
				if (e) {
					this.refs.play();
				} else {
					this.refs.pause();
				}
				this.isPlay = e
			},
			toggleList(e){
				if(e != this.active){
					this.active = e
					//请求集数接口，把e传给分页，返回给this.episodesList;
				}
			},
			onExpand(){
				this.isExpand = !this.isExpand
			},
			hidePop(){
				this.bottom = 0
				this.isfocus_2 = false
				this.isFocus = false
				this.isReplyPop = false
				this.replyObj = {}
			},
			inputBindFocus(e) {
				if(!this.replyObj.id){
					this.replyObj.id = '';
					this.replyObj.placeholder = this.$t('smkj.lxndpl');
				}
				this.bottom = e.detail.height - this.tabBarHeight;
				this.isReplyPop = true;
				this.isfocus_2 = true
			},
			inputBindBlur() {
				this.bottom = 0
			},
			inputOnFocus(e){
				this.bottom = e.detail.height - this.tabBarHeight;
			},
			onReply(id, nickname){
				this.replyObj.id = id;
				this.replyObj.placeholder = this.$t('smkj.hf') + ' @' + nickname;
				this.isFocus = true
			},
			async getMore(pleasure_info_id, pleasure_remark){
				const res = await this.$myRequest({
					url: '/api/pleasure/getPleasureRemark',
					method: "GET",
					data: {
						pleasure_info_id,
						pleasure_remark_id: pleasure_remark.id,
					}
				})
				pleasure_remark.twoRemark = res.data.list
			},
			async doRemarkPleasure(item) {
				if(!this.remark){
					this.$tools.showTx(this.$t('smkj.qsrpl'))
					return
				}
				const res = await this.$myRequest({
					url: 'api/pleasure/doRemarkPleasure',
					data: {
						pleasure_info_id:item.id,
						pleasure_remark_id: this.replyObj.id,
						remark:this.remark
					}
				})
				if (res.code == 1) {
					this.getComment(this.list[this.current])
					this.getMore(item.id, this.replyObj)
					this.hidePop()
					this.remark = ''
				}
			},
			getDiffTime(time) {
				const toDay = new Date();
				const targetDate = new Date(time);
				const diffTime = toDay.getTime() - targetDate.getTime();
					
				if (targetDate.getFullYear() < toDay.getFullYear()) { // 去年及更早的情况
					return targetDate.getFullYear() + this.$t('smkj.n') + (targetDate.getMonth() + 1) + this.$t('smkj.y') + targetDate.getDate() + this.$t('smkj.r');
				} else if (diffTime < 60000) { // 小于一分钟
					return this.$t('smkj.gg');
				} else if (diffTime < 3600000) { // 小于一小时
					return Math.floor(diffTime / 60000) + this.$t('smkj.fzq');
				} else if (diffTime < 86400000) { // 大于等于1小时小于一天的情况
					return Math.floor(diffTime / 3600000) + this.$t('smkj.xsq');
				} else if (diffTime < 172800000) { // 大于一天小于两天的情况
					return 1 + this.$t('smkj.tq');
				} else { // 大于两天的情况
					return (targetDate.getMonth() + 1) + this.$t('smkj.y') + targetDate.getDate() + this.$t('smkj.r');
				}
			},
			changeVideo(e){
				this.current = e.detail.current
				this.isPop = false;
				this.isPlay= true;
				const preRefs = uni.createVideoContext(`${this.current - 1}`);//上一页的video实例
				this.refs = uni.createVideoContext(`${this.current}`);//当前页的video实例
				const nextRefs = uni.createVideoContext(`${this.current + 1}`);//下一页的video实例
				this.refs.play()
				preRefs.pause()
				nextRefs.pause()
				
				if(this.list.length - this.current <= 2){
					if(this.total > this.list.length){
						this.page++;
						this.getPleasureInfoLike()
					}
				}
			},
			async getPleasureInfoLike() {
				const res = await this.$myRequest({
					url: 'api/pleasure/getPleasureInfoLike',
					data: {
						source: 1,
						page: this.page,
						page_size: '3'
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.total = res.data.total
					this.list = [...this.list, ...res.data.list]
				}
			},
			async getComment(item){
				this.isPop = true;
				const res = await this.$myRequest({
					url: '/api/pleasure/getPleasureRemark',
					method: "GET",
					data: {
						pleasure_info_id: item.id,
						pleasure_remark_id: '',
						page: '1',
						page_size: '30'
					}
				})
				if(res.code == 1){
					console.log(res);
					this.commentList = res.data.list.map(item => {
						return{
							...item,
							twoRemark: []
						}
					})
					this.commentList = [...this.commentList]
				}
			},
			getEpisodes(item){
				this.isEpisodes = true
			},
			async doLikePleasure(item) {
				const res = await this.$myRequest({
					url: 'api/pleasure/doLikePleasure',
					data: {
						pleasure_info_id: item.id,
						pleasure_remark_id: ''
					}
				})
				if (res.code == 1) {
					console.log(res)
					if(item.is_like==2){
						item.is_like=1
						item.like_num++
					}else{
						item.is_like=2
						item.like_num--
					}
				}
			},
			async doLikeComment(item){
				const res = await this.$myRequest({
					url: 'api/pleasure/doLikePleasure',
					data: {
						pleasure_info_id: this.list[this.current].id,
						pleasure_remark_id: item.id
					}
				})
				if (res.code == 1) {
					console.log(res)
					if(item.is_like==2){
						item.is_like=1
						item.like_num++
					}else{
						item.is_like=2
						item.like_num--
					}
				}
			},
		}
	}
</script>

<style scoped lang="less">
.watch{
	background-color: #101722;
	
	.back{
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		color: #fff;
		line-height: 32rpx;
		z-index: 1;
		position: fixed;
		top: 88rpx;
		left: 0;
		image{
			width: 20rpx;
			padding: 20rpx;
		}
	}
	
	.videoImg {
		width: 100%;
		height: 100vh;
		transition: all .5s;
		&.active{
			height: 40vh;
		}
	
		image,
		video {
			width: 100%;
			height: 100%;
		}
	}
	
	.swiper {
		width: 100%;
		height: 100vh;
	
		.swiper-item {
			width: 750rpx;
			height: 100%;
			position: relative;
		}
	}
	
	.list {
		position: fixed;
		right: 30rpx;
		bottom: 360rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 1;
		.item,
		.share {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #fff;
			margin-top: 40rpx;
			border: none;
			view,cover-view{
				/* #ifndef H5 */
				margin-top: 10rpx;
				/* #endif */
			}
			&::after {
				border: none;
			}
	
			image,cover-image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	
		.share {
			margin: 0;
	
			view,cover-view {
				margin-top: -12rpx;
			}
		}
	}
	
	.info{
		width: 100%;
		padding: 34rpx;
		color: #fff;
		z-index: 1;
		font-size: 28rpx;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		
		.tit{
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		
		.intro{
			width: 100%;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: justify;
			&.on{
				display: block;
			}
		}
		.btn{
			text-align: right;
			margin-top: 20rpx;
			color: #D2D2D2;
		}
	}
	
	.comment{
		width: 100%;
		height: 60%;
		border-radius: 8px 8px 0px 0px;
		transition: all .5s;
		// background: linear-gradient(144deg, rgba(0, 0, 0, 0.5647) 0%, rgba(0, 0, 0, 0.6126) 98%, rgba(30, 36, 44, 0.65) 98%);
		background-color: #101722;
		box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.3);
		position: fixed;
		bottom: -60vh;
		z-index: 101;
		transition: all .5s;
		&.active{
			bottom: 0rpx;
		}
		&>image{
			width: 40rpx;
			height: 40rpx;
			padding: 10rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;	
		}
		
		.commList{
			height: calc(100% - 240rpx);
			box-sizing: border-box;
			// padding: 0 40rpx;
			margin-top: 100rpx;
			overflow-y: auto;
			
			.comm-item{
				display: flex;
				margin-top: 16rpx;
				color: #d8d8d8;
				.lef{
					padding-top: 10rpx;
					image{
						border-radius: 50%;
						border: 2rpx solid #fff;
					}
				}
				
				.rig{
					flex: 1;
					margin-left: 20rpx;
					.comm-top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
						font-size: 24rpx;
					}
					.text{
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
					.bot{
						height: 34rpx;
						font-size: 22rpx;
						line-height: 34rpx;
						margin-bottom: 14rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							text{
								margin-right: 20rpx;
							}
						}
						.right{
							display: flex;
							align-items: center;
							image{
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
						}
					}
					.more{
						color: #999;
						font-size: 24rpx;
						position: relative;
						line-height: 48rpx;
						top: -8rpx;
					}
				}
				
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
			
			>.comm-item{
				border-bottom: 2rpx solid rgba(#999, .6);
				padding: 0 40rpx;
			}
		}
		
		.write{
			position: absolute;
			bottom: 0;
			height: 140rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 60rpx;
			border-top: 2rpx solid #666;
			display: flex;
			align-items: center;
			input{
				flex: 1;
				height: 60rpx;
				border-radius: 24rpx;
				background-color: rgba(77, 77, 77);
				text-align: center;
				color: #666;
			}
			image{
				width: 45rpx;
				margin-left: 40rpx;
			}
		}
	}
	
	.replyBox{
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 102;
		background-color: rgba(0, 0, 0, .6);
		.write{
			position: absolute;
			bottom: 0;
			height: 140rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 60rpx;
			border-top: 2rpx solid #666;
			display: flex;
			align-items: center;
			background-color: rgb(44,44,44);
			input{
				flex: 1;
				height: 60rpx;
				border-radius: 24rpx;
				background-color: rgba(77, 77, 77);
				text-align: center;
				color: #f1f1f1;
			}
			image{
				width: 45rpx;
				margin-left: 40rpx;
			}
		}
	}
	
	.episodes{
		width: 100%;
		height: 60vh;
		padding: 40rpx 30rpx 0;
		display: flex;
		flex-direction: column;
		border-radius: 8px 8px 0px 0px;
		transition: all .5s;
		background-color: #101722;
		color: #fff;
		box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.3);
		position: fixed;
		bottom: -60vh;
		z-index: 101;
		&.active{
			bottom: 0rpx;
		}
		
		.top{
			height: 110rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #d8d8d8;
			view{
				margin-bottom: 10rpx;
			}
			text{
				font-size: 28rpx;
			}
			&>image{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 40rpx;
				right: 40rpx;	
			}
		}
		.titBtn{
			height: 80rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			
			.btn_item{
				padding: 10rpx;
				margin-right: 10rpx;
				&.on{
					position: relative;
					&::after{
						content: "";
						width: 30rpx;
						border: 3rpx solid #fff;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
		.episodesList{
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;
			justify-content: space-between;
			&::-webkit-scrollbar{
				display: none;
			}
			.episodesItem{
				width: 210rpx;
				height: 326rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.bot{
					position: absolute;
					bottom: 0;
					width: 100%;
					font-size: 24rpx;
					line-height: 48rpx;
					height: 48rpx;
					background: rgba(0, 0, 0, 0.5);
					text-align: center;
				}
				.zzc{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background: rgba(0, 0, 0, .5);
					z-index: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 40rpx;
					}
				}
			}
		}
	}
}
</style>
